<!DOCTYPE HTML>
<html>
<head>
    <title>pixi.js example 15 - Filters</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000000;
        }
    </style>
    
    <script src="../../bin/pixi.dev.js"></script>
    <!--<script src="pixi.js"></script>-->
</head>
<body>
    <script>
    
    var renderer = PIXI.autoDetectRenderer(630, 410);
    
    // create an new instance of a pixi stage
    var stage = new PIXI.Stage(0xFFFFFF, true);
    
    stage.interactive = true;
    
    var bg = PIXI.Sprite.fromImage("depth_blur_BG.jpg");
    stage.addChild(bg);

    var littleDudes = PIXI.Sprite.fromImage("depth_blur_dudes.jpg");
    littleDudes.position.y = 100;
    stage.addChild(littleDudes);

    var littleRobot = PIXI.Sprite.fromImage("depth_blur_moby.jpg");
    littleRobot.position.x = 120;
    stage.addChild(littleRobot);

    var blurFilter1 = new PIXI.BlurFilter();
    var blurFilter2 = new PIXI.BlurFilter();
    
    littleDudes.filters = [blurFilter1];
    littleRobot.filters = [blurFilter2];

    renderer.view.style.position = "absolute"
    renderer.view.style.width = window.innerWidth + "px";
    renderer.view.style.height = window.innerHeight + "px";
    renderer.view.style.display = "block";
    
    // add render view to DOM
    document.body.appendChild(renderer.view);
    
    
    
    var count = 0;
    var switchy = false;
    
    stage.click = stage.tap = function()
    {
        switchy = !switchy
        
        if(!switchy)
        {
            //stage.filters = [filter];
        }
        else
        {
        //    stage.filters = null;
        }
        
    }
    
    /*
     * Add a pixi Logo!
     */
    var logo = PIXI.Sprite.fromImage("../../logo_small.png")
    stage.addChild(logo);
    
    logo.anchor.x = 1;
    logo.anchor.y = 1;

    logo.position.x = 630
    logo.scale.x = logo.scale.y = 0.5;
    logo.position.y = 400;
    logo.interactive = true;
    logo.buttonMode = true;
    
    logo.click = logo.tap = function()
    {
        window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
    }
    
    
    requestAnimFrame(animate);

    function animate() {
        
        count += 0.01;
        
        var blurAmount = Math.cos(count) ;
        var blurAmount2 = Math.sin(count) ;


        blurFilter1.blur = 20 * (blurAmount);
        blurFilter2.blur = 20 * (blurAmount2);
        renderer.render(stage);
        requestAnimFrame( animate );
    }

    </script>

    </body>
</html>
